<template>
    <div class="legal-body body-m">
        <ul class="side-nav">
            <li v-for="(item, idx) in items" :key="idx" :class="{active: state.sel_index === idx}" @click="state.sel_index = idx">
                {{ item }}
            </li>          
        </ul >
        <div class="side-content">

        </div>
    </div>
</template>

<script setup lang="ts" name="LegalCompliance">
import { reactive } from 'vue';


const state = reactive({
    sel_index: 0
})

const items = [
    'Website Terms of Use',
    'Terms & Conditions',
    'Privacy Policy',
    'Platform Agreement',
    'Licenses',
    'Restricted Jurisdictions',
    'Prohibited businesses',
    'Acceptable Use Policy',
    'Fraud Prevention',
    'Cookie Policy',
    'Redress & Compliant',
    'Request for Information (RFI)',
    'E-Sign Consent',
]

</script>

<style scoped lang="scss">
.legal-body {
    display: flex;
    flex-direction: row;

    .side-nav {
        width: 20%;
        height: 100%;

        li {
            padding: 1rem 0;
            color: #46a1c8;
            text-decoration: underline;
            cursor: pointer;
        }
    }
}
</style>